<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>books</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!--
      <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"  href="../static/css/bootstrap.min.css" type="text/css">
   -->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

</head>
<body >
    <div class="container">
    <h1 class="page-item">书单列表</h1>

        <div class=" alert alert-success " th:unless="${#strings.isEmpty(message)}">
           <a href="#" class="close" data-dismiss="alert">&times;</a>
            <strong>恭喜,</strong>
            <span th:text="${message}">信息提交成功</span>
        </div>
        <p class="text-right"><a href="/books/input" class="btn btn-primary">新增</a></p>
    <table class=" table table-bordered table-hover table-striped" >
        <thead>
        <tr>
            <th>#</th>
            <th>书名</th>
            <th>作者</th>
            <th>说明</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <!--
        count:计数功能
        index:从0开始的索引
        size:当前获取的列表所有的元素条数
        even/odd :
        -->
        <tr th:each="book,iterStat:${page.content}">
            <td th:text="${book.id}">1</td>
<!--            <td ><a href="#" th:text="${book.name}" th:href="@{/books/{id}(id=${book.id})}">书名</a></td>-->
            <td ><a href="#" th:text="${book.name}" th:href="@{'/books/'+${book.id}}">书名</a></td>
            <td th:text="${book.author}">作者</td>
            <td th:text="${book.description}">说明</td>
            <td th:switch="${book.status}">
                <span th:case="0">想读</span>
                <span th:case="1">在读</span>
                <span th:case="2">已读</span>
                <span th:case="*">状态</span>
            </td>
            <td>
                <a href="#" th:href="@{/books/input/{id}(id=${book.id})}">更新</a>
                <a href="#" th:href="@{/books/delete/{id}(id=${book.id})}">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
        <!--       定义上一页，下一页两个按钮    -->
        <nav>
            <ul class="pagination justify-content-between">
                <li class="page-item"><a  class="page-link" href="#" th:unless="${page.first}" th:href="@{'/books?page='+${page.number-1}}">上一页</a></li>
                <li class="page-item" ><a class="page-link" href="#" th:unless="${page.last}" th:href="@{/books(page=${page.number+1})}">下一页</a></li>
            </ul>
        </nav>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script th:src="@{/js/bootstrap.min.js}" src="../static/js/bootstrap.min.js" type="text/javascript"></script>

    </div>
</body>

</html>